<script src="../packed.js"></script>
<script src="../packed-plugins.js"></script>


<div id="titulo">asynx Animator</div><br>
<div id="log">LOG<br></div><br>

<button id="btn">animate</button>
<br>

<div id="anim1"><span>Anim1</span>dsfF<br>sdfsdfsdfsdfsd</div><br>

<script>

asynx("//div[span]").css({
	bg: '#E8EEF7',
	height: '300px',
	width: '200px',
	position: 'absolute',
	border:'3px #C3D9FF solid',
	visibility:'hidden'
});

	
	/*var el = asynx('//div[span]');
	
	el.mouseover(function(e,a) {
		asynx.anim.zoom(el, {type:'in'});
	});
	
	el.mouseout(function(e,a) {
		asynx.anim.zoom(el, {type:'out'});
	});*/

var tw, twFade;

asynx("btn").click(function() {
	
	/*asynx.anim.stop(tw);
	asynx.anim.stop(twFade);
	
	tw = new asynx.anim.tween("//div[span]", 0, 500, 20, asynx.anim.easing.elastic.Out);
	
	
	tw.onTweenUpdate = function(el, pos) {
		el.css({ "left": pos });
	}
	
	tw.onTweenEnd = function(el, pos) {
	 	twFade = asynx.anim.fade(el, {
			from:100,
			to:50,
			duration:40,
			equation: asynx.anim.easing.bounce.Out
		});
	}*/
	
	/*tw = asynx.anim.show('//div[span]', {}, "y", function(e) {
		
		asynx.anim.fade('//div[span]', {to:20});
		
	});*/
	
	asynx.anim.splashElastic('//div[span]');
	
	
	/*asynx('//div[span]').css({visibility:'visible',alpha:0});
	asynx.anim.fade('//div[span]', {to:100});
	asynx.anim.show('//div[span]', {}, "y", function(){
		asynx.anim.fade('//div[span]', {to:0});
	});*/
	
	//asynx.anim.splash('//div[span]');


	
	//asynx.anim.fade('an', {from:0,to:100});
	
	//var f = asynx('anim1').css("top")+20;
	//asynx.anim.move('anim1', { from: f , duration:20, equation: 'elasticOut' }, "y");
	
	
	 
	
});

</script>